<template>
  <div class="userinforPage">

    <div class="userinfor-main">

      <div class="userinfor-main-form">

        <Form :model="formItem" :label-width="80" :rules="rules" ref="form">

          <FormItem label="商品价格">
            <span class="form-item-price">{{ pageInfor.price}}元</span>
          </FormItem>

          <FormItem prop="name" label="收货姓名">
            <Input style="max-width: 250px" type="text" v-model="formItem.name" placeholder="请输入姓名"></Input>
          </FormItem>

          <FormItem prop="phone" label="收货手机">
            <Input style="max-width: 200px" type="text" v-model="formItem.phone" placeholder="请输入手机"></Input>
          </FormItem>

          <FormItem prop="years" label="年龄">
            <Input style="max-width: 200px" type="text" v-model="formItem.years" placeholder="请输入年龄"></Input>
          </FormItem>

          <FormItem prop="height" label="身高">
            <Input style="max-width: 200px" type="text" v-model="formItem.height" placeholder="请输入身高"></Input>
          </FormItem>

          <FormItem prop="weight" label="体重">
            <Input style="max-width: 200px" type="text" v-model="formItem.weight" placeholder="请输入身高"></Input>
          </FormItem>

          <FormItem prop="car" label="私家车">
            <Select v-model="formItem.car" style="width:100px;z-index: 100086;">
              <Option v-for="item in cars" :value="item.id" :key="item.id">{{item.text}}</Option>
            </Select>
          </FormItem>

          <FormItem prop="carNo" label="车牌">
            <Input style="max-width: 200px" type="text" v-model="formItem.carNo" placeholder="请输入车牌"></Input>
          </FormItem>

          <FormItem label="城市区域">
            <selectCity ref="selectCity"></selectCity>
          </FormItem>

          <FormItem prop="address" label="详细地址">
            <Input style="max-width: 500px" type="text" v-model="formItem.address" placeholder="请填写详细地址"></Input>
          </FormItem>

          <FormItem label="客户备注">
            <div class="userinfor-main-edit">
              <Edit ref="edit1"></Edit>
            </div>
          </FormItem>

          <FormItem label="量体师备注">
            <div class="userinfor-main-edit">
              <Edit ref="edit2"></Edit>
            </div>
          </FormItem>
        </Form>
      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext" prevtext="保存并支付">

      </bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
          是否确认{{modal.text}}？
        </h2>
      </Modal>

      <Modal title="查看二维码" v-model="visible" @on-ok="openSignatureModal">
        <img :src="imgpath" v-if="visible" style="width: 100%">
      </Modal>

      <Modal class="signatureModal" title="签名板" v-model="signatureModal.state" :closable="false" cancel-text="清空"
             ok-text="保存上传" :mask-closable="false">
        <div class="signatureModal-wrapper">
          <signaturepad ref="signaturepad"></signaturepad>
        </div>
        <div class="signatureModal-wrapper-footer" slot="footer">
          <Button type="error" @click="clearSignature">清空签名板</Button>
          <Button type="success" @click="saveSignature">保存签名并上传</Button>
        </div>
      </Modal>

    </div>

  </div>
</template>

<script>
  import {isSame} from "common/js/utils";
  import {mapMutations, mapState} from 'vuex';
  import signaturepad from "base/signature"
  import {getPrice, postSignature} from "api/userinfor";
  import bottomBtn from "base/bottomBtn.vue";
  import pageLoading from "base/pageLoading";
  import selectBox from "base/selectbox";
  import selectBoxText from "base/selectboxText";
  import selectBoxInput from "base/selectBoxInput";
  import drupload from "base/upload";
  import Edit from "base/inputEdit";
  import selectCity from "base/selectCity";
  import $ from "jquery"
  import {formRules, cars} from "./config";

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        formItem: {
          user: '',
          years: '',
          height: "",
          weight: "",
          address: '',
          userremark: "",
          figureremark: "",
          phone: "",
          car: '',
          carNo: ""
        },
        modal: {
          state: false,
          text: "选择"
        },
        rules: formRules,
        visible: false,
        imgpath: "",
        cars,
        signatureModal: {
          state: false
        },
        orderId: "",
      }
    },
    methods: {
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      pageNext() {
        if (this._vaildForm()) {
          this.modal.state = true
        }
      },
      asyncOK() {
        this.formItem.selectcity = this.$refs.selectCity.getData();
        this.formItem.userremark = this.$refs.edit1.getPlainTxt();
        this.formItem.figureremark = this.$refs.edit2.getPlainTxt();
        this.setUserinfor(this.formItem);
        $.post(window.cgiData.page.userInfor.post, {data: JSON.stringify(this.$store.state)}).done((Rs) => {
          this.visible = true;
          this.imgpath = Rs.path || "";
        });
      },
      _jugeData() {
        if (this.measureData === "") {
          this.pagePrev();
        }
      },
      _vaildForm() {
        let rs = false;
        this.$refs.form.validate(function (juge) {
          rs = juge
        });
        return rs
      },
      //获得价格
      async _getPrice() {
          try{
              this.setPrice(await getPrice({data: JSON.stringify(this.$store.state)}) || "")
          }catch(err){
               console.log(err)
          }
      },
      openSignatureModal() {
        this.signatureModal.state = true;
      },
      clearSignature() {
        this.$refs.signaturepad.clear();
      },
      saveSignature() {
        let file = this.$refs.signaturepad.savePng();
        //保存签名图片
        postSignature({file, measureid: window.cgiData.id}).then(Rs => {
          Rs.status ? this.$Notice.success({
            title: '保存成功',
            desc: '稍后进行刷新',
            onClose: () => {
              window.location.reload();
            }
          }) : this.$Notice.error({
            title: '保存失败',
            desc: '保存失败请稍后重试'
          });
        })
      },
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setUserinfor": "SET_USERINFOR",
        "setPrice": "SET_PRICE"
      }),
    },
    components: {
      bottomBtn,
      pageLoading,
      selectBox,
      selectBoxText,
      selectBoxInput,
      drupload,
      Edit,
      selectCity,
      signaturepad
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex',
        'liningId',
        "stereotype",
        'designData',
        'measureData',
        'measureMore',
        'stitchwork',
        'logo',
        "pageInfor"
      ])
    },
    mounted() {
      //this.signatureModal.state = true;
    },
    updated() {

    },
    created() {

    },
    activated() {
      this._getPrice();
    },
    deactivated() {

    },
    watch: {}
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";

  .userinforPage {
    .userinfor-main-form {
      padding: 25px 0;
      .ivu-form-item-label {
        text-align: center;
        font-size: 14px;
      }
      .ivu-form-item-content {
        .clearfix();
      }
      .form-item-price {
        font-size: 20px;
        color: #9d2828;
      }
    }

    .userinfor-main-edit {
      padding: 10px 30px 0 0;
    }

    .ivu-select-dropdown {
      z-index: 1000086;
    }
  }

  .signatureModal-wrapper {
    min-height: 600px;
    min-width: 485px;
    background: #ffe49b;
  }

  .signatureModal {
    .ivu-modal {
      width: 520px !important;
      margin: 0 auto !important;
    }
  }
</style>
